<template>
	<view>
		<IndexHead :config="navConfig"/>
		<view class="line"></view>
		
		<navigator url="timeYue" class="kuang">
			<text>按日选择</text>
			<image src="../../../static/myPic/qiehuan.png" mode=""></image>
		</navigator>
	
	
	<view class="riqi">
	    <page-head :title="title"></page-head>
	    <view class="uni-padding-wrap">
			<view class="uni-title">
				{{year}}-{{month}}-{{day}}
			</view>
			<view class="zhi">至</view>
			<view class="end">结束日期</view>
		</view>
		
		<view class="lines"></view>
		<view class="lines2"></view>
		
		<view class="dates">
			<picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange">
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index">{{item}}</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index">{{item}}</view>
				</picker-view-column>
			</picker-view>
		</view>
	</view>
</view>
</template>

<script>
export default{
	data(){
		const date = new Date()
		const years = []
		const year = date.getFullYear()
		const months = []
		const month = date.getMonth() + 1
		const days = []
		const day = date.getDate()
		
		for (let i = 1990; i <= date.getFullYear(); i++) {
		    years.push(i)
		}
		
		for (let i = 1; i <= 12; i++) {
		    months.push(i)
		}
		
		for (let i = 1; i <= 31; i++) {
		    days.push(i)
		}
		return{
			navConfig:{
				backgroundColor: 'transparent',
				color: '#fff',
				common:{
					hasSearch:false,
					hasMenu:false,
					hasTitle:true,
					minHead:false,
				},
				left: {
					showPos:false,
							
				},
				mid:{
					title:'选择时间',
					hasSearchMid:false,
					rtext:'确定'
				},
				right:{
							
				}
			},
			title: 'picker-view',
			years,
			year,
			months,
			month,
			days,
			day,
			value: [9999, month - 1, day - 1],
			/**
			 * 解决动态设置indicator-style不生效的问题
			 */
			visible: true,
			indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`
		}
	},
	methods: {
	    bindChange (e) {
	        const val = e.detail.value
	        this.year = this.years[val[0]]
	        this.month = this.months[val[1]]
	        this.day = this.days[val[2]]
	    }
	}
}
</script>

<style>
	.line{
		width: 746upx;
		height: 1upx;
		opacity: 1;
		background: rgba(220,220,220,1);
	}
	.kuang{
		margin-left: 43upx;
		margin-top: 30upx;
		width: 200upx;
		height: 58upx;
		opacity: 1;
		background: #F6F6F6;
		position: absolute;
		border-radius: 50upx;
	}
	.kuang text{
		margin-left: 19upx;
		margin-bottom: 5upx;
		margin-top: 10upx;
		width: 165upx;
		height: 26upx;
		opacity: 1;
		font-size: 28upx;
		font-family: PingFang SC Regular;
		color: rgba(51,51,51,1);
		position: absolute;
	}
	.kuang image{
		width: 23upx;
		height: 19upx;
		opacity: 1;
		margin-left: 150upx;
		margin-top: 19upx;
		position: absolute;
	}
	.riqi{
		margin-top: 180upx;
	}
	.riqi .uni-title{
		color: #559FFF;
		font-family: Microsoft YaHei Regular;
		margin-left: 66upx;
		margin-bottom: 30upx;
		float: left;
		margin-top: -60upx;
	}
	.zhi{
		float: left;
		margin-top: -60upx;
		margin-left: 350upx;
		color: #999999;
		position: absolute;
	}
	.end{
		float: left;
		margin-top: -60upx;
		margin-left: 506upx;
		color: #999999;
		position: absolute;
	}
	.lines{
		width: 269upx;
		height: 1upx;
		opacity: 1;
		background: rgba(85,160,255,1);
		margin-left: 44upx;
		margin-top: 238upx;
	}
	.lines2{
		width: 269upx;
		height: 1upx;
		opacity: 1;
		background: rgba(85,160,255,1);
		margin-left: 440upx;
		margin-top: -2upx;
	}
	.dates{
		margin-top: 100upx;
	}
	picker-view {
	    width: 100%;
	    height: 600upx;
	    margin-top:20upx;
	}
	
	.item {
	    line-height: 100upx;
	    text-align: center;
	}
</style>
